import React from 'react';
import ProTable from '@ant-design/pro-table';
import { Button, Popconfirm } from 'antd';
import { connect } from 'umi';

const Table = ({ informationOpen, dispatch, openDetailModal, openAddCaresModal }) => {
  const { TableLegalAffairsRef } = informationOpen;

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      valueType: 'index',
      align: 'center',
      fixed: 'left',
      width: 64,
    },
    { title: '标题', align: 'center', dataIndex: 'title' },
    {
      title: '是否有宣传视频/图片',
      align: 'center',
      dataIndex: 'media',
      valueEnum: {
        YES: { text: '是' },
        NO: { text: '否' },
      },
      hideInTable: true,
    },
    {
      title: '是否有宣传视频/图片',
      align: 'center',
      dataIndex: 'hasMedia',
      render: (dom, roleData) => [
        roleData.hasMedia && <span>是</span>,
        !roleData.hasMedia && <span>否</span>,
      ],
    },
    {
      title: '发布时间',
      align: 'center',
      dataIndex: 'createTime',
      valueType: 'dateRange',
      hideInTable: true,
    },
    { title: '联系地址', align: 'center', dataIndex: 'address', hideInSearch: true },
    { title: '联系方式', align: 'center', dataIndex: 'contact', hideInSearch: true },
    {
      title: '编辑时间',
      align: 'center',
      dataIndex: 'updateTime',
      hideInSearch: true,
      render: (dom, roleData) => (
        <>
          <span>{roleData.updateTime.split(' ')[0]}</span>
        </>
      ),
    },
    {
      title: '状态',
      align: 'center',
      dataIndex: 'status',
      valueEnum: {
        ENABLE: { text: '当前启用' },
        DISABLE: { text: '未启用' },
      },
    },
    {
      title: '操作',
      valueType: 'option',
      align: 'center',
      dataIndex: 'id',
      width: 200,
      fixed: 'right',
      render: (dom, roleData) => [
        <a key={`${roleData.id}detail`} onClick={() => openDetailModal(roleData)}>
          预览
        </a>,
        <a key={`${roleData.id}updata`} onClick={() => openAddCaresModal(roleData.id)}>
          编辑
        </a>,
        <Popconfirm
          key={`${roleData.id}status`}
          title={`确认${roleData.status === 'ENABLE' ? '停用' : '启用'}？`}
          placement="topRight"
          onConfirm={() => upstatus(roleData.id, roleData.status)}
        >
          <a>{roleData.status === 'ENABLE' ? '禁用' : '启用'}</a>
        </Popconfirm>,
        <Popconfirm
          key={`${roleData.id}del`}
          title="确认删除该组织吗？"
          placement="topRight"
          onConfirm={() => deleteCaresInfo([roleData.id])}
        >
          {roleData.status === 'ENABLE' ? '' : <a>删除</a>}
        </Popconfirm>,
      ],
    },
  ];
  // 停启用
  const upstatus = (id, isStatusTemp) => {
    dispatch({
      type: 'informationOpen/isStatus',
      payload: {
        id,
        status: isStatusTemp === 'ENABLE' ? 'DISABLE' : 'ENABLE',
      },
    });
  };

  const getList = params =>
    new Promise(resolve => {
      dispatch({
        type: 'informationOpen/getCaresList',
        payload: { ...params },
        resolve,
      });
    });

  const deleteCaresInfo = ids => {
    dispatch({
      type: 'informationOpen/deleteCares',
      payload: {
        id: ids,
      },
    });
  };

  return (
    <ProTable
      headerTitle="信息列表"
      rowKey="id"
      actionRef={TableLegalAffairsRef}
      scroll={{ x: 'max-content' }}
      request={async params => getList(params)}
      columns={columns}
      toolBarRender={_ => [
        <Button
          type="primary"
          onClick={() => {
            openAddCaresModal();
          }}
        >
          创建新简介
        </Button>,
      ]}
    />
  );
};

export default connect(({ informationOpen }) => ({
  informationOpen,
}))(Table);
